<template>

  <el-row>
    <el-col :span="12" class="parent">

      <!-- 参考：https://admincloud.iviewui.com/login?redirect=/index-->
      <div style="transform: translateY(25%)">
        <el-carousel height="700px">
          <el-carousel-item  v-for="item in banner.path" :key="item">
            <el-image :src="item" alt="图片丢失了" fit="contain"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

    </el-col>


    <el-col :span="12" class="col-right">

      <div class="container">
        <div class="drop">
          <div class="content">
            <h2 style="font-size: 24px">注册</h2>
            <form>
              <div class="inputBox">
                <input type="text" placeholder="真实姓名" v-model.trim="registerForm.userName">
              </div>
              <div class="inputBox">
                <input type="text" placeholder="登录用户名" v-model.trim="registerForm.loginUser">
              </div>
              <div class="inputBox">
                <input type="password" placeholder="密码" v-model="registerForm.password" @keyup.enter="register">
              </div>
              <div class="inputBox">
                <input type="button" value="注册" style="cursor:pointer;" @click="register">
              </div>
            </form>
          </div>
        </div>
        <a href="#" class="btns">Tips : 登录用户名有且唯一。</a>
        <a href="#" class="btns signup" @click="toLogin">返回</a>
      </div>

    </el-col>
  </el-row>

</template>

<script>

  import http from '@/utils/http';
  import {desEncrypt} from "../../utils/utils";
  import setting from '@/config/setting';

  export default {
    // 第二个注册页面
    name: "Register2.vue",
    data() {
      return {
        registerForm: {
          // 登录用户名
          loginUser: null,
          // 密码
          password: null,
          // 真实姓名
          userName: null,
        },
        // 轮播图
        banner: {
          path: [
            require('@/assets/images/register/banner1.png'),
            require('@/assets/images/register/banner2.png'),
            require('@/assets/images/register/banner3.png'),
          ],
        },
        // 系统名称
        sysName: setting.sysName,
      }
    },
    methods: {
      /**
       * 提交注册
       */
      register(){
        let localStorage = window.localStorage;
        let loginPasswordKey = localStorage.loginPasswordKey

        // 加密key需要后端提供
        let encryptUser = desEncrypt(this.registerForm.loginUser, loginPasswordKey);
        let encryptPassword = desEncrypt(this.registerForm.password, loginPasswordKey);

        http.post("/open/register", {
          loginUser: encryptUser,
          password: encryptPassword,
          userName: this.registerForm.userName,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$alert('恭喜!注册成功', '', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({path: "/"})
            }
          });

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 返回登录页
       */
      toLogin(){
        this.$router.push({path: "/"})
      }
    },
    mounted() {

    },
  }
</script>

<style scoped>

  .parent {
    height: 100vh;
    width:50%;
    background-image: url(../../assets/images/register/bg-login.png);
  }

  .child {
    /*width: 700px;*/
    /*height: 530px;*/
    transform: translate(0%, 80%);
  }



  /*水滴*/

  .col-right {
    /*font-family:"fzjljt",arial,sans-serif;*/
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #eff0f4;
  }

  .container
  {
    position: relative;
    left: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container .drop
  {
    position: relative;
    width: 350px;
    height: 350px;
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05),
    25px 35px 20px rgba(0,0,0,0.05),
    25px 30px 30px rgba(0,0,0,0.05),
    inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
  }
  .container .drop:hover
  {
    border-radius: 50%;
  }
  .container .drop::before
  {
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
  }
  .container .drop::after
  {
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
  }
  .container .drop .content
  {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;
  }
  .container .drop .content h2
  {
    position: relative;
    color: #333;
    font-size: 1.5em;
  }
  .container .drop .content form
  {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
  }
  .container .drop .content form .inputBox
  {
    position: relative;
    width: 225px;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1),
    inset -2px -5px 10px rgba(255,255,255,1),
    15px 15px 10px rgba(0,0,0,0.05),
    15px 10px 15px rgba(0,0,0,0.025);
    border-radius: 25px;
  }
  .container .drop .content form .inputBox::before
  {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
  }
  .container .drop .content form .inputBox input
  {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
  }
  .container .drop .content form .inputBox input[type="submit"]
  {
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
  .container .drop .content form .inputBox:last-child
  {
    width: 120px;
    background: #ff0f5b;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1),
    15px 15px 10px rgba(0,0,0,0.05),
    15px 10px 15px rgba(0,0,0,0.025);
    transition: 0.5s;
  }
  .container .drop .content form .inputBox:last-child:hover
  {
    width: 150px;
  }
  .btns {
    /*font-size: 12px;*/
    position: absolute;
    right: -120px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: #c61dff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(190,1,254,0.05),
    15px 25px 10px rgba(190,1,254,0.1),
    15px 20px 20px rgba(190,1,254,0.1),
    inset -10px -10px 15px rgba(255,255,255,0.5);
    border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  }
  .btns::before
  {
    content: '';
    position: absolute;
    top: 15px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
  }
  .btns.signup
  {
    bottom: 150px;
    right: -120px;
    width: 80px;
    height: 80px;
    border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
    background: #01b4ff;
    box-shadow: inset 10px 10px 10px rgba(1,180,255,0.05),
    15px 25px 10px rgba(1,180,255,0.1),
    15px 20px 20px rgba(1,180,255,0.1),
    inset -10px -10px 15px rgba(255,255,255,0.5);
  }
  .btns.signup::before
  {
    left: 20px;
    width: 15px;
    height: 15px;
  }
  .btns:hover
  {
    border-radius: 50%;
  }


</style>
